<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片轮播</title>
    <link rel="stylesheet" type="text/css" href="css1.css"/>
    <script>
        window.onload=function () {
            var time=null;
            var ulimg=document.getElementsByClassName('img')[0];
            var lis=ulimg.getElementsByTagName('li').length;
            var i=1;

            time=setInterval(function () {
                i=i%lis;
                i++;


            },1000)
        }
    </script>
</head>
<body>
<div class="banner">
    <ul class="img">
        <li class="active">
            <a href="#"><img src="image/tu1.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="image/tu2.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="image/tu3.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="image/tu4.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="image/tu5.jpg"></a>
        </li>
        <li>
            <a href="#"><img src="image/tu6.jpg"></a>
        </li>
    </ul>
    <ul class="tab">

        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <div class="btn">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
</div>
</body>
</html>
